<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
			    padding: 0;
			    margin: 0;
			}
			body{
				
				background-image: url(lb%20img/手工.jpg);
				background-size:1100px 1200px;
				
			}
			ol,a{
			    font-size: 20px;
			    list-style: none;
			    text-decoration: none;
			    background-color: #d35400;
			    color: #FFFFFF;
			    width: 100px;
				height:50px;
				line-height: 50px;
			    text-align: center;
			    border: 0px solid black;
			    border-radius: 5px;
			    margin: 2px;
			}
			a{
			    display: block;
				font-size: small;
			}
			
			.plat{
			    display: none;
			}
			.nav{
			     float: left;
			     margin-left:60px;
				
			 }
			.nav:hover .plat{
			    display: block;
			    clear: both;
			}
			.plat li:hover>a{
			    background-color: dimgrey;
			}
			h1{
				color:#1abc9c;
				text-align: center;
				background-color: #EEEEEE;
			}
			#fgf{
				height:50px;
				background-color: #2980b9;
			}
			#zt{
				position: absolute;
				top:16.5%;
				left:70%;
				transform: translate(-50%,-50%);
				width: 100%;
			}
		</style>
	</head>
	<body>
		<h1>欢迎来到陈夕的手工之家</h1>
		 <div id = "fgf"></div>
		 <div id = "zt">
			 <ol class="nav">
			     <a href="#">剪纸</a>
			     <ol class="plat">
			         <li><a href="#">春节风</a></li>
			         <li><a href="#">人物</a></li>
			         <li><a href="#">动物</a></li>
			     </ol>
			 </ol>
			 <ol class="nav">
			     <a href="#">绘画</a>
			     <ol class="plat">
			         <li><a href="#">插画</a></li>
			         <li><a href="#">马赛克画</a></li>
			         <li><a href="#">石画</a></li>
			     </ol>
			 </ol>
			 <ol class="nav">
			     <a href="#">编织</a>
			     <ol class="plat">
			         <li><a href="#">手链</a></li>
			         <li><a href="#">兰子</a></li>
			         <li><a href="#">项链</a></li>
			     </ol>
			 </ol>
			 </div>
	</body>
</html>

